<template>
  <div class="bjt">
    <div class="login">
      <div class="left">
        <img src="../../assets/img/lefttp.webp" alt="" />
      </div>
      <div class="right">
        <div class="logo">
          <img src="../../assets/img/logo.png " alt="" />
        </div>
        <p style="text-align: center">餐饮后台管理系统</p>
        <el-form style="max-width: 260px; margin: 20px auto" :model="formLabelAlign">
          <!-- 用户名 -->
          <el-input v-model="formLabelAlign.username" placeholder="用户名/手机号/邮箱" />

          <!-- 密码 -->
          <el-input v-model="formLabelAlign.password" placeholder="密码" />

          <!-- 验证码 -->
          <el-row :gutter="10">
            <el-col :span="16"><el-input v-model="yzm" placeholder="验证码" /></el-col>
            <el-col :span="8"><el-button class="sure">发送验证码</el-button></el-col>
          </el-row>
          <p style="color: #c7a215" @click="toforget">忘记密码?</p>

          <!-- 登录 -->
          <el-button type="warning" color="#BDC097" @click="tologin">登录</el-button>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, h } from 'vue'
import { useRouter } from 'vue-router'
import { loginApi } from '@/api/api.js'
import '@/mock/students.js'
import { ElNotification } from 'element-plus'
import home from '../home/Index.vue'
import info from '../home/rong/info/Index.vue'
import { useStore } from 'vuex'

const store = useStore()

const yzm = ref('')
//路由实例
const router = useRouter()
const formLabelAlign = reactive({
  username: '',
  password: '',
})
//登录
const tologin = async () => {
  const res = await loginApi({ state: formLabelAlign })
  //后端返回的数字成功或失败
  console.log(res)

  if (res.data.status === 1) {
    ElNotification({
      title: '登录成功',
      message: h('i', { style: 'color: teal' }, 'dy账号登录成功,权限为0'),
    })
    localStorage.setItem('user', JSON.stringify(formLabelAlign))
    router.push('/home')
  } else if (res.data.status === 2) {
    ElNotification({
      title: '登录成功',
      message: h('i', { style: 'color: teal' }, 'rong账号登录成功,权限最高'),
    })
    localStorage.setItem('user', JSON.stringify(formLabelAlign))
    console.log(router)
    router.push('/home')
    //done:------------------------------------------------
    //添加路由
    // router.addRoute({ name: 'home', path: '/home/rong', component: rong })
    // router.addRoute('rong', { path: '/home/rong/info', component: info })
    router.addRoute({
      name: 'home',
      path: '/home',
      component: home,
      children: [{ path: '/home/rong/info', component: info }],
    })

    store.state.quanxian = true
  } else {
    ElNotification({
      title: '登录失败',
      message: h('i', { style: 'color: teal' }, '账号密码错误'),
    })
  }
}
</script>

<style lang="less" scoped>
.bjt {
  width: 100%;
  height: 100%;
  background: url('../../assets/img/login02.png') no-repeat center center/cover;
  display: flex;
  justify-content: center;
  align-items: center;
  .login {
    width: 800px;
    height: 400px;
    background: rgb(245, 245, 245);
    .left {
      float: left;
      width: 360px;
      height: 400px;

      img {
        width: 100%;
        height: 100%;
      }
    }
    .right {
      float: left;
      width: 440px;
      height: 400px;
      padding: 50px 60px 0 60px;
      .logo {
        height: 50px;
        display: flex;
        justify-content: center;

        img {
          width: 100px;
          height: 50px;
        }

        p {
          text-align: center;
        }
        .sure {
          border-radius: 10px;
        }
      }
    }
  }
  :deep(.el-input__wrapper) {
    border-radius: 8px;
    margin-bottom: 10px;
    font-size: 12px;
  }

  .sure {
    width: 100%;
    font-size: 12px;
    color: #c7a215;
    --el-border-radius-base: 8px;
  }
}
.el-button--warning {
  margin-top: 20px;
  width: 100%;
  color: #fff;
}
</style>
